<script lang="ts">
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      show: false,
      requestParamList: [
        {
          phoneAreaCode: "86",
          realName: "",
          phone: "",
          fileIdOfAvatar: "584928095924229",
          msg: "",
          errMsg: ""
        },
      ],
      excelData: [],
      // 上传中
      isUploading: false,
      isF: false
    }
  },
  methods: {
    chooseExcel() {
      this.$kt.file.chooseFileOne(".xlsx,.xls").then((res) => {
        // console.log(res);
        let file = res.file;
        if (file) {
          // 清除所有requestParamList中realName或者phone为空的项
          this.requestParamList = this.requestParamList.filter(item => item.realName && item.phone);

          const reader = new FileReader();
          reader.onload = (e) => {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const firstSheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[firstSheetName];
            let excelData = XLSX.utils.sheet_to_json(worksheet);
            console.log(JSON.stringify(excelData));
            // 获取excel每一个单元格的key，如果key中含姓名就加入requestParamList中的realName中

            for (let i = 0; i < excelData.length; i++) {
              let item = excelData[i];
              let keys = Object.keys(item);
              let requestParam = {
                phoneAreaCode: "86",
                realName: "",
                phone: "",
                fileIdOfAvatar: "584928095924229",
                msg: "",
                errMsg: ""
              };
              for (let j = 0; j < keys.length; j++) {
                let key = keys[j];
                if (key.includes("姓名")||key.includes("姓")||key.includes("名")) {
                  requestParam.realName = item[key];
                }
                if (key.includes("手机")||key.includes("电话")) {
                  requestParam.phone = item[key];
                }
              }
              this.requestParamList.push(requestParam);
            }

          };
          reader.readAsArrayBuffer(file);
        }
      });
    },
    toInit() {
      this.isUploading = false;
      this.isF = false;
      this.requestParamList = [
        {
          phoneAreaCode: "86",
          realName: "",
          phone: "",
          fileIdOfAvatar: "584928095924229",
          msg: "",
          errMsg: ""
        },
      ];
    },
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    addRequestParam() {
      this.requestParamList.push({
        phoneAreaCode: "86",
        realName: "",
        phone: "",
        fileIdOfAvatar: "584928095924229"
      });
    },
    async toSave() {
      for (let i = 0; i < this.requestParamList.length; i++) {
        let item = this.requestParamList[i];
        if (!item.realName) {
          this.$message.error("姓名不能为空");
          return;
        }
        if (!item.phone) {
          this.$message.error("手机号不能为空");
          return;
        }
        this.isUploading = true;
        this.isF = false;
        await this.requestSave(item);
        this.$emit("save");
        this.isF = true;
        // this.isUploading = false;
      }
    },
    requestSave(requestParam) {
      // /business-talent-web/admin/userAccountSimple/saveOfAdd
      return new Promise((resolve, reject) => {
        requestParam.msg = "保存中...";
        // 查看手机号码格式
        // 中国大陆手机号码
        if (requestParam.phoneAreaCode === "86") {
          if (!/^1[3456789]\d{9}$/.test(requestParam.phone)) {
            requestParam.msg = "";
            requestParam.errMsg = "号码格式错误";
            resolve(null);
            return;
          }
        }


        this.$kt.requestSecurity.send({
          uri: "/business-talent-web/admin/userAccountSimple/saveOfAdd",
          method: "POST",
          data: requestParam,
          stateSuccess: (res) => {
            requestParam.msg = res.msg;
            resolve(res);
          },
          stateFail: (res) => {
            requestParam.msg = "";
            requestParam.errMsg = res.errMsg;
            resolve(res);
          }
        });
      });
    }
  }

}
</script>

<template>
  <el-dialog
      v-model="show"
      width="400px"
      title="新增/编辑 员工用户">
    <div style="text-align: right">
      <el-button
          v-if="!isUploading"
          @click="chooseExcel"
      >导入Excel</el-button>
    </div>
    <div style="height: 10px"></div>
    <el-scrollbar
        style="height: 400px;width: 100%"
    >
      <div
          v-if="!isUploading">

        <div
            class="box"
            v-for="(item,index) in requestParamList"
        >
          <el-form label-position="top">
            <el-form-item label="姓名">
              <el-input
                  placeholder="输入姓名"
                  v-model="item.realName"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input
                  placeholder="输入手机号"
                  v-model="item.phone"
              ></el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: right">
            <el-button
                type="danger"
                @click="()=>requestParamList.splice(index,1)"
                style="color: #FFFFFF"
            >
              <kt-icon
                  icon="el-icon-delete"></kt-icon>
            </el-button>
          </div>
        </div>
        <div style="text-align: center">
          <el-button
              @click="addRequestParam"
          >
            <kt-icon
                icon="el-icon-plus"
            ></kt-icon>
          </el-button>
        </div>
      </div>

      <el-table
      v-else
      :data="requestParamList"
      >
        <el-table-column
            prop="realName"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号">
        </el-table-column>
        <el-table-column
            label="操作">
          <template #default="scope">
            <div
            v-if="scope.row.msg"
            >{{scope.row.msg}}</div>
            <div style="color: #ff0000" v-if="scope.row.errMsg">
              {{scope.row.errMsg}}
            </div>
          </template>
        </el-table-column>
      </el-table>

    </el-scrollbar>

    <div
        v-if="!isUploading"
        style="text-align: right">
      <el-button
          @click="toSave"
          type="primary">保存
      </el-button>
      <el-button @click="close">取消</el-button>
    </div>
    <div
        v-if="isUploading&&isF"
        style="text-align: right">
      <el-button
          @click="toInit()">返回
      </el-button>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.box {
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  margin-bottom: 20px;
  border-radius: 5px;
}
</style>